<p class="title-big" *ngIf="FormConfig.formName">{{ FormConfig.formName }}</p>

<form nz-form [formGroup]="validateForm" [ngClass]="FormConfig.class" [ngStyle]="{'width': FormConfig.width +'px'}">
  <!-- formControlItems -->
  <div nz-row>
    <div nz-col ngClass="form-item" *ngFor="let item of FormConfig.formControlItems" [nzSpan]="item.span">
      <nz-form-item>
        <nz-form-label *ngIf="item.label" [nzSpan]="item.label?(item.labelSpan? item.labelSpan: 8):0">{{ item.label }}</nz-form-label>
        <nz-form-control 
          [nzSpan]="item.label?(item.controlSpan?item.controlSpan : 16):23"
          [nzErrorTip]="item.nzTip.error">
          <!-- 在这里添加菜单复用项 -->
          <nz-input-group *ngIf="item.formControlType == 'input'"
            [nzPrefixIcon]="item.inputIcon"
            [ngStyle]="item.style">
            <input nz-input
              [type]="item.inputType" 
              [formControlName]="item.formControlName" 
              [placeholder]="item.placeholder"/>
          </nz-input-group>
          <label nz-checkbox *ngIf="item.formControlType == 'checkbox'"
            [formControlName]="item.formControlName"
            [ngStyle]="item.style">
            <span>{{ item.content }}</span>
          </label>
          <!-- 多选 -->
          <nz-select *ngIf="item.formControlType == 'select' && item.mode === 'multiple'"
            [(ngModel)]="item.multipleList"
            [nzMode]="item.mode"
            [formControlName]="item.formControlName"
            (ngModelChange)="selectFunc(item.selectFunc, $event)"
            [ngStyle]="item.style">
            <nz-option
              *ngFor="let option of item.selectOptions"
              [nzValue]="option.value"
              [nzLabel]="option.label"
              [nzHide]="!item.isNotSelected(item.multipleList, option.value)">
            </nz-option>
          </nz-select>
          <!-- 单选 -->
          <nz-select *ngIf="item.formControlType == 'select' && item.mode !== 'multiple'"
          [formControlName]="item.formControlName"
          (ngModelChange)="selectFunc(item.selectFunc, $event)"
          [ngStyle]="item.style">
            <nz-option
              *ngFor="let option of item.selectOptions"
              [nzValue]="option.value"
              [nzLabel]="option.label">
            </nz-option>
          </nz-select>
          <nz-range-picker *ngIf="item.formControlType == 'date-range'"
            [nzRanges]="item.ranges" 
            [formControlName]="item.formControlName"
            nzShowTime
            [nzFormat]="item.format"
            [ngStyle]="item.style">
          </nz-range-picker>
        </nz-form-control>
      </nz-form-item>
    </div>
    <div nz-col 
      *ngFor="let item of FormConfig.otherItems" 
      [nzSpan]="item.span"
      ngClass="form-item">
      <a *ngIf="item.extendType == 'a'"
        [ngClass]="item.class"
        [ngStyle]="item.style"> 
          {{ item.content }} 
      </a>
      <p 
        *ngIf="item.extendType == 'p'"
        [ngClass]="item.class"
        [ngStyle]="item.style">
          {{ item.content }} 
      </p>
      <button nz-button *ngIf="item.extendType == 'button'"
        (click)="clickFunc(item.clickFunc)"
        [nzType]="item.buttonType"
        [ngClass]="item.class"
        [ngStyle]="item.style">
          <i nz-icon *ngIf="item.leftButtonIcon" [nzType]="item.leftButtonIcon"></i>
          {{ item.content }}
          <i nz-icon *ngIf="item.rightButtonIcon" [nzType]="item.rightButtonIcon"></i>
      </button>
      <nz-button-group *ngIf="item.extendType == 'button-group'" 
        [nzSize]="item.buttonGroupSize"
        [ngStyle]="item.style">
        <button nz-button *ngFor="let child of item.childs"
          (click)="clickFunc(child.clickFunc)"
          [nzType]="child.buttonType"
          [ngClass]="child.class">
          <i nz-icon *ngIf="child.leftButtonIcon" [nzType]="child.leftButtonIcon"></i>
          {{ child.content }}
          <i nz-icon *ngIf="child.rightButtonIcon" [nzType]="child.rightButtonIcon"></i>
        </button>
      </nz-button-group>
    </div>
  </div>
  <p class="form-item" style="margin-top: 20px;" *ngIf="FormConfig.showFormData">
    Form Value: {{ validateForm.value | json }}
  </p>
</form>